<template>
  <div>
    <my-input 
      type="number"
      placeholder="请输入分数"
      @input.native="setScore"
      :value="searchedScore">
    </my-input>

    <my-button-group
      :regulars="regulars"
      :current="currentRegular"
      @click="setCurrentRegular"
    ></my-button-group>

    <my-menu
      :show="menuShow"
      :data="menuList"
      :checked-data="checkedList"
      @click="setChecked"
    ></my-menu>
  </div>
</template>

<script>
import MyButtonGroup from './MyButtonGroup.vue';
import MyInput from './MyInput.vue'
import MyMenu from './MyMenu.vue';

export default {
  name: 'Search',
  components: {
    MyInput,
    MyButtonGroup,
    MyMenu
  },
  props: {
    data: Array,
  },
  data() {
    return {
      menuShow: false,
      currentRegular: 'up',
      menuList:[],
      checkedList:[],
      regulars:[
        {
          regular: 'up',
          text: '以上'
        },
        {
          regular: 'down',
          text: '以下'
        }
      ],
      searchedScore: 0
    }
  },
  methods: {
    setScore(value) {
      const _value = value.target.value;

      if(_value.length > 0) {
        this.searchedScore = Number(_value);
        this.filterStudents();
      }
    },
    setCurrentRegular(value) {
      this.currentRegular = value;
      this.filterStudents();
    },
    filterStudents() {
      switch(this.currentRegular) {
        case 'up':
          this.menuList = this.data.filter(item => {
            return item.score >= this.searchedScore;
          });
          break;
        
        case 'down':
          this.menuList = this.data.filter(item => {
            return item.score < this.searchedScore;
          });
          break;
        default:
          break;
      }

      this.menuShow = this.menuList.length > 0;
    },

    getChecked(id) {
      return this.checkedList.some(item => item.id === id);
    },

    setChecked(info) {
      const hasThisItem = this.getChecked(info.id);

      if(hasThisItem) {
        this.checkedList = this.checkedList.filter(item => (item.id !== info.id)
        )

      }else {
        this.checkedList.push(info)
      }

      this.$emit('setCheckedList', this.checkedList)
    }
  }
}
</script>